<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的基本语法</title>
    <script src ="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <h3>{{nickname}}------{{age}}--------{{address}}</h3>  
        <br />
        <!-- {{ 大括号中中的 内容 是一个变量 }} -->
        <!-- 大括号的模板语言不能再双引号里面使用 -->
        <!-- <input type="text" value="{{nickname }}">这个是错的 -->
        <!-- {{ 在元素属性中 要想把属性后面的值变为变量，就在前面加上v-bind指令后面是变量 }} -->
        <!-- v-bind:指令，用于设置属性  在属性前面加上v-bind就表示后面的数据是个变量-->
        <!-- 只要属性前面加上v-bind后面的""里面的""就可以写js代码 === 三个等于号是强制 -->

        <!-- oninput----事件表示内容发生变化的时候执行 vue对他进行了封装 v-on -->
        <!-- v-on用于设置事件，事件名称给该事件在vue事件添加对应的事件方法 -->
        <!-- <input type="text" v-bind:value="nickname" oninput="fun()"> -->
        <input type="text" v-bind:value="nickname" v-on:input="setVaule">
        <!-- <input type="text" v-bind:value="1===1?'abc':'ccc'"> -->

        <!-- 简略写法 --> 
        <!-- 绑定属性用冒号 绑定事件用@ -->
        <!-- "mao：号" 是 "v-bind" 的简写  @是  “v-on：”  的简写-->
        <!-- <input type="text" :value="age" @input="setAge"> -->
        
        <!-- 继续简化绑定事件方法的值就是用来改变数据的所以还可以直接简写： -->
   
        <!-- $event表示事件对象 event触发这个事件的方法中的event-->
        <input type="text" :value = "age" @input="age=$event.target.value" >

        <!-- v-model就是：value和@input的封装 v-model可以实现双向绑定-->
        <input type="text" v-model="address">
        <button @click="add">添加</button>
        <ul>
            <!-- v-for指令,用于循环数据 -->
            <!-- 渲染下面数据的数组 -->
            <li v-for="(item,index) in userList">{{index}}-----{{item.nickname}}-----{{item.age}}-------{{item.address}}</li>
        </ul>
    </div>
    <script>
        function fun(){
            console.log("l1")
        }
        // 开发模式下不使用devtools工具这个是vue的调试工具
        Vue.config.devtools = true
        // 开发阶段，取消生成提示信息
        Vue.config.productionTip = false
        new Vue({
            // 指定渲染的容器
            el:"#app", // el属性指定渲染的容器，放置所有的数据
            // 所有的数据都放在data的返回值那边
            data(){  // data函数放置所有数据
                return{
                    nickname:'周杰伦',
                    age:20,
                    address:"北京",
                    userList:[
                        {
                            nickname:'jack',
                            age:20,
                            address:"美国"
                        },
                        {
                            nickname:'tom',
                            age:30,
                            address:"美国"
                    }]
                }
            },
            methods:{
                // ，methods属性中要将方法统一写在这里
                setVaule(e){
                    // e是方法的事件对象 e.target获取触发该事件的元素
                    // value属性获取元素中的最新值
                    console.log(e.target.value);
                    // this表示当前的vue对象的nickname属性的值等于事件对象的value也就是输入的值
                    this.nickname=e.target.value;
                    // 这里发生立刻渲染 就是只要数据发生变化立刻渲染到对饮的页面上 不需要额外的对页面的渲染的操作
                },
                setAge(e){
                    this.age = e.target.value;
                },
                add(){
                    //添加用户 
                    this.userList.push({
                        nickname:this.nickname,
                        age:this.age,
                        address:this.address,
                    })
                }

            },
        })
    </script>
</body>
</html>